<template>
	<div id="app">
		<h1>{{ count }}</h1>
		<h1>{{ userInfo }}</h1>
		<h5>{{ myCount }}</h5>
		<router-view />
	</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
	name: 'App',
	computed: {
		// ...mapState(['count']),
		...mapState({
			count: state => {
				return state.app.count;
			},
			userInfo: state => {
				return state.user.userInfo;
			}
		}),
		...mapGetters(['myCount'])
	}
};
</script>

<style>
#app {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
